<template>
    <div>
      <el-collapse v-model="activeName" accordion>
        <el-collapse-item title="每日饮食打分" name="diet">
          <el-form :model="diet">
            <el-form-item label="早餐" label-width="50px">
              <el-input v-model="diet.breakfast" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="午餐" label-width="50px">
              <el-input v-model="diet.lunch" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="晚餐" label-width="50px">
              <el-input v-model="diet.dinner" autocomplete="off"></el-input>
            </el-form-item>
          </el-form>
          <el-button  v-if="score==null" type="primary" @click="submitDiet">打分</el-button>
          <div class="score" v-if="score!=null">
            <el-row>
              <el-col :span="5" :offset="4">今日评分：</el-col>
              <el-col :span="14" :offset="1">
                <el-rate
                  v-model="score"
                  disabled
                  :colors="['#99A9BF', '#F7BA2A', '#FF9900']"
                  show-text
                >
                </el-rate>
              </el-col>
            </el-row>
          </div>
        </el-collapse-item>
        <el-collapse-item title="每日用药打卡" name="drug">
          <el-form :model="drug">
            <el-form-item label="今日服用药物" label-width="100px">
              <el-input v-model="drug.now" autocomplete="off"></el-input>
            </el-form-item>
          </el-form>
          <el-button v-if="!hasPunch" type="primary" @click="submitDrug">打卡</el-button>
          <el-button v-if="hasPunch" type="success" disabled>已打卡</el-button>
        </el-collapse-item>
      </el-collapse>
    </div>
</template>

<script>
  import {mapState} from 'vuex';
    export default {
      name: "Punch",
      props:{
        punchVisible:{
          type:Boolean,
          default:false
        }
      },
      computed:mapState(["token"]),
      data(){
        return {
          dialog:false,
          activeName: 'diet',
          diet:{
            breakfast:'',
            dinner:'',
            lunch:''
          },
          drug:{
            drug:''
          },
          score:null,
          hasPunch:false
        }
      },
      watch: {
        punchVisible: function(newVal, oldVal){
          this.dialog=newVal;
        }
      },
      methods:{
        handleClose(){
          if(!this.hasPunch){
            this.$confirm('是否放弃打卡?')
              .then(()=>{
                this.closeDialog();
              })
              .catch(_ => {});
          }else{
            this.closeDialog();
          }
        },
        closeDialog(){
          this.$emit('closeDialog');
        },
        submitDiet(){
          this.$axios({
            url:'http://47.92.167.153:8085/user/foodScore',
            method:'post',
            data:{
              // diet:this.diet,
              dto:this.diet,
              token:this.token
            },
            headers:{
              'Content-Type':'application/json'
            }
          }).then((res)=>{
            res=res.data;
            if(res.success){
              res=res.data;
              this.score=res.score-5;
            }
          })
        },
        submitDrug(){
          console.log(this.drug);
          this.$axios({
            url:'http://47.92.167.153:8085/user/drug',
            method:'post',
            data:{
              // drug:this.drug,
              dto:this.drug,
              token:this.token
            },
            headers:{
              'Content-Type':'application/json'  //如果写成contentType会报错
            }
          }).then((res)=>{
            res=res.data;
            if(res.success){
              this.$notify({
                title: '提示',
                message: "打卡成功！",
                type: 'success'
              });
            }
          }).catch(function(error){
            console.log(error)
          })

          this.hasPunch=true;
          this.closeDialog();
        }
      }
    }
</script>

<style scoped lang="stylus">
.el-collapse
  .el-collapse-item
    position relative
    &:nth-child(1)
      .el-button
        margin-left 42%
      .score
        .el-row
          &:nth-child(1)
            color rgb(31, 45, 61);
</style>
